<template>
	<view class="temp">
		<view class="line" @click="messageClick()">
			<view class="icon">
				<image :src="icon" mode="widthFix" />
			</view>
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "if-message",
		props: {
			title: {
				type: String,
				required: true
			},
			icon: {
				type: String,
				required: false,
				default: "../../static/icon/arrow.png"
			}
		},
		methods: {
			messageClick: function() {
				this.$emit('messageClick')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		@extend .flex-between;
		padding: 20upx;
		justify-content: flex-start;
		background-color: $background-color-1;
		border-top: solid 1px #e9e9e9;
	
		.icon {
			margin-top: 5upx;
	
			image {
				width: 38upx;
				height: 38upx;
			}
		}
	
		.title {
			margin-left: 10upx;
			font-size: $uni-font-size-base;
			margin-top: 2upx;
		}
	}
</style>
